<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司新闻</title>
    <!--<link rel="stylesheet" href="../swiper/swiper-min.css">-->
    <!--<script src="../swiper/swiper-min.js"></script>-->
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        :root {
            --fontColor: #d82019;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        .wfull {
            width: 100%;

        }

        .obc {
            object-fit: cover;
        }

        .hfull {
            height: 100%;
        }
    </style>


</head>
<body>


<div th:replace="index_header.html :: index_header"></div>


<div th:replace="News/news_header.html :: news_header"></div>


<style>
    .root {
        width: 80%;
        margin: auto;
    }

    .item-box .item .desc p {
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        color: #999;
    }

    .item-box .item {
        text-decoration: none;
    }

    .item-box .item .text div {
        margin: 10px 0;
    }

    .item-box .item .text .title {
        color: #58596d;
        font-size: 18px;
        line-height: 30px;
        height: 60px;
    }

    .item-box .item .text .time {
        color: #999;
    }

    .item-box .item .text {
        padding: 10px;
    }

    .item-box .item .image-box {
        overflow: hidden;
    }

    .item-box .item .image-box img {
        transition: all 0.5s;
        height: 240px;
    }

    .item-box .item:hover .text .title {
        color: var(--fontColor);
    }

    .item-box .item:hover .image-box img {
        transform: scale(1.2);
    }

    .item-box .item .inner-item {
        border: 1px solid lightgray;
    }


    @media screen and (min-width: 901px) {
        /* 电脑  */
        .item-box .item {
            width: 33.3%;
            float: left;
            padding: 12px;
        }
    }

    @media screen and (max-width: 900px) {
        /* 手机 */
        .item-box .item {
            width: 100%;
            margin: 20px 0;
            display: block;
        }
    }
</style>
<div class="root">

    <div class="frist" style="padding: 20px;">
        <h1>公司动态</h1>
        <h2 style="font-weight: normal;  color: var(--fontColor);  text-transform: uppercase;">COMPANY NEWS</h2>
    </div>

    <div class="item-box  clearfix  ">
        <a class="item" th:href="@{'/news/id/'+${item.id}}" th:each="item, iterStat : ${pageInfo.list}">
            <div class="inner-item">
                <div class="image-box">
                    <img th:src="${item.img_url}" alt="" class="wfull  obc">
                </div>
                <div class="text">
                    <div class="title">
                        <p style="font-weight: normal;" th:text="${item.title}"></p>
                    </div>
                    <div class="desc">
                        <p th:text="${item.content}"></p>
                    </div>
                    <div class="time">
                        <p th:text="${item.time_stamp}"></p>
                    </div>
                </div>
            </div>
        </a>
    </div>


    <script th:inline="javascript">
        console.log([[${pageInfo}]]);
    </script>


</div>
<br>


<style>
    .navigation ul {
        display: inline-block;
    }

    .navigation {
        /*border: 1px solid red;*/
        text-align: center;
    }

    .navigation ul li a:hover {
        background: #f20d0d;
        color: white;
    }


    @media screen and (min-width: 901px) {
        /* 电脑  */
        .navigation ul li a {
            color: #f20d0d;
            padding: 10px;
            display: inline-block;
        }

        .navigation ul li {
            float: left;
            margin: 0 5px;
            background: rgba(242, 13, 13, .06);
            cursor: pointer;
        }
    }

    @media screen and (max-width: 900px) {
        /* 手机 */
        .navigation ul li a {
            color: #f20d0d;
            padding: 6px;
            display: inline-block;
        }

        .navigation ul li {
            float: left;
            margin: 0 3px;
            background: rgba(242, 13, 13, .06);
            cursor: pointer;
        }
    }
</style>
<nav aria-label="Page navigation" class="navigation    clearfix">
    <ul class="pagination pagination-lg">
        <!--       首页           -->
        <li th:if="${pageInfo.hasPreviousPage}">
            <a onclick="First_page()">首页</a>
        </li>

        <!--               上一页             -->
        <li th:if="${pageInfo.hasPreviousPage}">
            <a onclick="prePage()" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>


        <!--  循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
        <th:block th:each="nav : ${pageInfo.navigatepageNums}">
            <li th:class="${nav == pageInfo.pageNum} ? 'active':''    ">
                <a class="normal-item" onclick="pageNum(this)" th:if="${nav == pageInfo.pageNum-1}"
                   th:text="${nav}"></a>
                <a class="current-item" href="javascript:;" style="font-weight: bold;  border: red solid 1px;  "
                   th:if="${nav == pageInfo.pageNum}" th:text="${nav}"></a>
                <a class="normal-item" onclick="pageNum(this)" th:if="${nav == pageInfo.pageNum+1}"
                   th:text="${nav}"></a>
            </li>
        </th:block>

        <!--          下一页                 -->
        <th:block th:if="${pageInfo.hasNextPage}">
            <li>
                <a onclick="Next_page()" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </th:block>

        <!--        尾页                  -->
        <li th:if="${pageInfo.hasNextPage}">
            <a onclick="Last_page()">尾页</a>
        </li>
    </ul>
</nav>
<script th:inline="javascript">
    // 从后台接收数据
    var pageInfo = [[${pageInfo}]];
    // debugger

    var url1 = window.location.href;         // http://localhost:8081/Movie/Read_Movie?file=%E9%98%BC%A0&aaa=12123&qweqweqw=BBB
    var url6 = document.location;
    url6.origin;        // http://localhost:8081
    url6.protocol;      // http:
    url6.host;          // localhost:8081
    url6.hostname;      // localhost
    url6.port;          // 8081
    url6.pathname;      // /Movie/Read_Movie
    url6.search;        // ?file=%E9%98%BC%A0&aaa=12123&qweqweqw=BBB
    url6.href;          // http://localhost:8081/Movie/Read_Movie?file=%E9%98%BC%A0&aaa=12123&qweqweqw=BBB
    // debugger

    function First_page() {
        // 第一页
        window.location.href = "/news/page/1";            // 本窗口打开
    }

    function prePage() {
        // 上一页
        // console.log(url6.pathname);
        window.location.href = "/news/page/" + (pageInfo.prePage);            // 本窗口打开
    }

    function Next_page() {
        // 下一页
        // console.log(url6.pathname);
        window.location.href = "/news/page/" + (pageInfo.nextPage);            // 本窗口打开
    }

    function pageNum(eee) {
        // 选择的页数
        // console.log(eee.innerText);
        window.location.href = "/news/page/" + (eee.innerText);            // 本窗口打开
    }

    function Last_page() {
        // 最后一页
        window.location.href = "/news/page/" + (pageInfo.pages);            // 本窗口打开
    }

    // function getQueryString(name) {
    //     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    //     var r = window.location.search.substr(1).match(reg);
    //     if (r != null) return decodeURI(r[2]); return null;
    // }
</script>






<div th:replace="footer.html :: tongchuang-footer"  ></div>







</body>
</html>